<template>
  <view>
    <customtop top_title="换群大厅"></customtop>
    <view class="top_search" :style="{top: 54 + 'px'}">
      <view class="container">
        <view class="top_search_box">
          <view class="icon"><i class="iconfont icon-sousuoxiao"></i></view>
          <view class="input"><input class="weui-input" type="text" placeholder="请输入搜索内容" :value="params.k" @input="getKeywordValue" @confirm="toSearch" /></view>
        </view>
      </view>
    </view>

    <view class="condition" :style="{top: 96 + 'px'}">
      <view class="box container">
        <view class="left_box">
          <view class="items">
            <view class="item" :class="(!params.order || params.order == '' ? 'on' : '')" @click="bindtapSetOrderParams('order', '')">默认</view>
            <view class="item" :class="(params.order == 1 ? 'on' : '')" @click="bindtapSetOrderParams('order', 1)">最新</view>
          </view>
        </view>
        <view class="right_box" @click="onShow_screen_popup();">
          <view class="screen_switch" :class="JSON.stringify(params_search) != '{}' ? 'on' : ''" bindtap="onShow_screen_popup">
            <u-icon name="grid-fill" size="14" color="" class="icon"></u-icon><span>筛选</span>
          </view>
        </view>
      </view>
    </view>
    <view class="condition_blank"></view>

    <view class="qun_list2" v-if="!loading">
      <view class="container">
        <view class="items" v-if="quns.length > 0">
          <view class="item" v-for="(item, index) in quns" :key="index">
            <view class="top">
              <view class="info">
                <view class="name"><span class="tips" v-if="item.top_status == 1">置顶</span>{{item.name}}</view>
                <view class="types">
                  <view class="type_item">{{item.created_at}}</view>
                  <view class="type_item">{{item.number}}人+</view>
                </view>
              </view>
              <view class="btn" v-if="item.is_huan == 0" @click="huan2(item.id)">立即换群</view>
              <view class="btn btn1" v-if="item.is_huan == 1" @click="huan3(item.id);">已交换</view>
            </view>
            <view class="types2">
              <view class="type_item" v-for="(item_category, index_category) in item.categorys" :key="index_category">{{item_category.category_name}}</view>
            </view>
            <view class="images">
              <view class="item_img">
                <image
                  class="img img1"
                  mode="aspectFill"
                  :src="item.qrcode"
                  @click="previewImage2(item.qrcode, [item.qrcode, item.number_jietu])"
                />
              </view>
              <view class="item_img">
                <image
                  class="img img2"
                  :src="item.number_jietu"
                  @click="previewImage2(item.number_jietu, [item.qrcode, item.number_jietu])"
                />
              </view>
              <view class="item_img">
                <image
                  class="img img3"
                  :src="item.number_jietu"
                  @click="previewImage2(item.number_jietu, [item.qrcode, item.number_jietu])"
                />
              </view>
            </view>

          </view>
          <view class="uloadmore"><u-loadmore :status="loadmore_status" /></view>
        </view>
        <u-empty
          v-if="quns.length == 0"
          mode="data"
          icon="http://cdn.uviewui.com/uview/empty/data.png"
          text="暂无内容~"
        >
        </u-empty>
      </view>
    </view>

    <view class="float_create" @click="jumpPage('/pages/qun/create')">
      <view class="btn"><i class="iconfont icon-fabu2"></i></view>
    </view>

    <u-popup
      mode="right"
      customStyle="width: 400rpx; height: 100%;"
      :show="screen_popup_show"
      @close="onClose_screen_popup"
    >
      <view class="screen_popup" :style="{paddingTop: (statusBarHeight + navHeight) + 'px'}">
        <view class="box" :style="{height: (screen_popup_box_height != undefined ? screen_popup_box_height : '') + 'px'}">
          <view class="items">
            <view class="item">
              <view class="title">群分类</view>
              <view class="options">
                <span
                  v-for="(item, index) in qun_categorys"
                  :key="index"
                  :class="(params_search.category_id == item.id) ? 'on' : ''"
                  @click="bindtapSetSearchParams_type(item.id)"
                >
                  {{item.name}}
                </span>
              </view>
            </view>
          </view>
        </view>
        <view class="btns">
          <view class="btn" @click="bindtapResetSearch">重置</view>
          <view class="btn" @click="bindtapSearch">确定</view>
        </view>
      </view>
    </u-popup>

    <u-popup
      :show="qrcode_popup_show"
      :round="10"
      mode="bottom"
      @close="onClose_qrcode_popup"
      :closeable="true"
    >
      <view class="qun_qrcode_popup">
        <view class="tip1">群二维码名片</view>
        <view class="qrcode_img">
          <image @click="previewImage(current_qrcode)" class="img" :src="current_qrcode" mode="aspectFill" />
        </view>
        <view class="tip2">点击放大，长按识别进群~</view>
      </view>
    </u-popup>

    <u-popup
      mode="center"
      round="3"
      :show="popup1_show"
      @close="onClose_popup1"
      custom-style="background-color: rgba(255, 255, 255, 0);"
    >
      <view class="popup1">
        <view class="top">
          <view class="title">请选择一个群</view>
          <i class="iconfont icon-guanbi1 close" @click="onClose_popup1"></i>
        </view>
        <scroll-view scroll-y="true" class="items">
          <view v-if="quns_my.length > 0">
            <view
              class="item"
              v-for="(item, index) in quns_my"
              :key="index"
              @click="set_qun_id(item.id)"
            >
              <view class="qrcode">
                <image class="img" :src="item.qrcode" />
              </view>
              <view class="info">
                <view class="name">{{item.name}}</view>
                <view class="types">
                  <span class="span_item">三天前</span>
                  <span class="span_item">100人+</span>
                </view>
              </view>
              <i class="iconfont" :class="qun_id == item.id ? 'icon-yuanxingxuanzhong on' : 'icon-yuanxingweixuanzhong'"></i>
            </view>
          </view>
          <u-empty
            v-if="quns_my.length == 0"
            mode="data"
            icon="http://cdn.uviewui.com/uview/empty/data.png"
            text="请添加自己的群进行交换~"
          >
          </u-empty>
        </scroll-view>
        <view class="foot_btns">
          <view class="item" @click="jumpPage('/pages/qun/create')">上传新群</view>
          <view class="item" @click="huan">确定交换</view>
        </view>
      </view>
    </u-popup>

    <u-popup
      mode="center"
      round="3"
      :show="contact_popup_show"
      @close="onClose_contact_popup"
      customStyle="background-color: transparent;"
    >
      <view class="contact_popup">
        <view class="box">
          <view class="tip1">金币不足，可开通会员或获取金币</view>
          <view class="btns">
            <button class="btn btn1" @click="jumpPage('/pages/account/gold')">获取金币</button>
            <button class="btn btn2" @click="jumpPage('/pages/account/vip')">开通会员</button>
          </view>
          <view class="tip2">普通用户换群需支付 <span class="text-danger">{{config.qun.huan_gold}}</span> 金币</view>
          <view class="tip2">会员VIP用户免费</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { request } from "@/utils/http.js"
import customtop from "@/components/customtop.vue"

export default {
  components: { customtop },

  data() {
    return {
      quns: [],
      loading: true,
      loadmore_status: 'loadmore',
      loadmore_finished: false,
      params: {
        page_size: 15,
        page: 1,
        order: '',
        k: '',
      },
      params_search: {},
      current_id: 0,
      contact_popup_show: false,
      qrcode_popup_show: false,
      current_qrcode: '',
      config: {},
      qun_categorys: [],
      screen_popup_show: false,
      statusBarHeight: uni.getStorageSync('statusBarHeight'),
      navHeight: uni.getStorageSync('navHeight'),
      popup1_show: false,
      qun_id: '',
      qun_id2: '',
      quns_my: [],
    }
  },

  onLoad: function (options) {
    request.post('/qun/getCategorys').then(res => {
      this.qun_categorys = res.data;
    })

    request.post('/common/getConfig').then(res => {
      this.config = res.data;
    })

    uni.showLoading();
    this.getQunsPaginate();

    // 计算右侧筛选弹窗高度
    let that = this;
    uni.getSystemInfo({
      success: function (res) {
        let windowHeight = res.windowHeight;
        let screen_popup_box_height = windowHeight - 50 - that.statusBarHeight - that.navHeight;
        that.screen_popup_box_height = screen_popup_box_height;
      }
    })
  },

  onReachBottom() {
    this.getMore();
  },

  onPullDownRefresh: function() {
    uni.showLoading()
    this.params.page = 1;
    this.getQunsPaginate();
  },

  methods: {
    huan2: function(qun_id2) {
      this.qun_id2 = qun_id2;
      uni.showLoading();
      request.post('/qun/getQuns_my').then(res => {
        uni.hideLoading();
        this.quns_my = res.data;
        this.popup1_show = true;
      })
    },

    huan3: function(qun_id2) {
      uni.showLoading();
      let params = {
        qun_id2: qun_id2
      };
      request.post('/qun/huan', params).then(res => {
        uni.hideLoading();
        if (res.code == 200) {
          this.popup1_show = false;
          this.qrcode_popup_show = true;
          this.current_qrcode = res.data;
        } else if (res.code == 400) {
          uni.showToast({ title: res.message, icon: 'none' });
        }
      })
    },

    huan: function() {
      uni.showLoading();
      let params = {
        qun_id: this.qun_id,
        qun_id2: this.qun_id2
      };
      request.post('/qun/huan', params).then(res => {
        uni.hideLoading();
        if (res.code == 4001) {
          this.popup1_show = false;
          this.contact_popup_show = true;
          return false;
        } else if (res.code == 400) {
          uni.showToast({ title: res.message, icon: 'none' });
          return false;
        }

        this.popup1_show = false;
        this.qrcode_popup_show = true;
        this.current_qrcode = res.data;
        this.huanAfter(this.qun_id2);
      })
    },

    set_qun_id: function(qun_id) {
      this.qun_id = qun_id;
    },

    onClose_contact_popup: function() {
      this.contact_popup_show = false;
    },

    onShow_popup1: function() {
      this.popup1_show = true;
    },

    onClose_popup1: function() {
      this.popup1_show = false;
    },

    getQunsPaginate: function() {
      let params = this.params;
      request.post('/qun/getQunsPaginate', params).then(res => {
        uni.stopPullDownRefresh();
        uni.hideLoading();
        this.loading = false;
        if (res.data.total == 0) return false;

        if (res.data.current_page == 1) {
          this.quns = res.data.data;
        } else {
          this.quns = this.quns.concat(res.data.data);
        }

        if (this.params.page == res.data.last_page) {
          this.loadmore_finished = true;
          this.loadmore_status = 'nomore';
          return false;
        }

        let params = this.params;
        params.page = parseInt(res.data.current_page) + parseInt(1);
        this.loadmore_status = 'loadmore';
        this.loadmore_finished = false;
        this.params = params;
      })
    },

    getMore: function() {
      if (!this.loadmore_finished) {
        this.loadmore_status = 'loading';
        this.getQunsPaginate();
      }
    },

    getKeywordValue: function(e) {
      this.params.k = e.target.value;
    },

    toSearch: function() {
      uni.showLoading();
      this.loading = true;
      this.quns = [];
      this.params.page = 1;
      this.getQunsPaginate();
    },

    bindtapSetOrderParams: function(key, value = '') {
      this.params.page = 1;
      this.params[key] = value;
      this.loading = true;
      this.quns = [];
      uni.showLoading();
      this.getQunsPaginate();
    },

    bindtapSetSearchParams_type: function(value) {
      this.params_search.category_id = value;
      this.$forceUpdate();
    },

    bindtapResetSearch: function() {
      let params = this.params;
      this.params_search = {};
      this.onClose_screen_popup();

      let array = {};
      array.page = 1;
      array.order = params.order;
      this.params = array;
      this.loading = true;
      this.quns = [];
      uni.showLoading();
      this.getQunsPaginate();
    },

    bindtapSearch: function() {
      let params = this.params;
      let params_search = this.params_search;
      params = Object.assign(params, params_search);
      params.page = 1;

      this.params = params;
      this.loading = true;
      this.quns = [];
      uni.showLoading();
      this.getQunsPaginate();
      this.onClose_screen_popup();
    },

    onShow_screen_popup() {
      this.screen_popup_show = true;
    },

    onClose_screen_popup() {
      this.screen_popup_show = false;
    },

    // 交换后
    huanAfter: function(id) {
      let quns = this.quns;
      if (!quns.length > 0) return false;
      for (var i = 0; i < quns.length; i++) {
        if (quns[i].id == id) {
          quns[i].is_huan = 1;
        }
      }
      this.quns = quns;
    },

    onClose_qrcode_popup: function() {
      this.qrcode_popup_show = false;
    },

    previewImage: function(current) {
      let urls = [];
      urls.push(current);
      uni.previewImage({
        current: current,
        urls: urls
      })
    },

    previewImage2: function(current, urls) {
      uni.previewImage({
        current: current,
        urls: urls
      })
    },

    switchTab: function(url) {
      uni.switchTab({ url: url });
    },

    jumpPage: function(url) {
      uni.navigateTo({ url: url })
    }
  }
}
</script>

<style>
@import url("qun.css");
page {
  padding-bottom: 30rpx;
}
.condition_blank {
  height: 83px;
}
</style>
